﻿@section header{
    <link href="~/Content/js/flow/GooFlow.css" rel="stylesheet" />
    <link href="~/Content/js/flow/formpreview.css" rel="stylesheet" />

    <script src="~/Content/js/validate/jquery.validate.min.js"></script>

    <script src="~/Content/js/flow/gooflow.js"></script>
    <!-- 可选(只读编辑)，将流程图左侧工具栏可编辑-->
    <script src="~/Content/js/flow/GooFunc.js"></script>
    <!-- 可选，将流程图导出为图片文件的扩展包 -->
    <script src="~/Content/js/flow/GooFlow.export.js"></script>
    <!-- 可选，将流程图输出打印-->
    <script src="~/Content/js/flow/GooFlow.print.js"></script>
    <script src="~/Content/js/flow/flowlayout.js"></script>
}

<form id="form1">
    <div class="widget-body">
        <div id="wizard" class="wizard" data-target="#wizard-steps" style="border-left: none; border-top: none; border-right: none;">
            <ul class="steps">
                <li data-target="#step-1" class="active"><span class="step">1</span>角色单据<span class="chevron"></span></li>
                <li data-target="#step-2"><span class="step">2</span>流程设计<span class="chevron"></span></li>
            </ul>
        </div>
        <div class="step-content" id="wizard-steps" style="border-left: none; border-bottom: none; border-right: none;">
            <div class="step-pane active" id="step-1" style="margin: 10px; margin-bottom: 0px;">
                <div class="alert alert-danger" style="text-align: left; margin-bottom: 10px;">
                    <i class="fa fa-warning alert-dismissible" style="position: relative; top: 1px; font-size: 15px; padding-right: 5px;"></i>
                    请填写流程表单信息。
                </div>
                <div class="panel-body" style="width: 88%;">
                    <input type="hidden" id="ID" name="ID" value="" />
                    <input type="hidden" id="SchemeContent" name="SchemeContent" value="" />
                    <table class="form">
                        <tr>
                            <th class="formTitle">流程编号</th>
                            <td class="formValue">
                                <input id="SchemeCode" name="SchemeCode" type="text" class="form-control required" autocomplete="off" />
                            </td>
                        </tr>
                        <tr>
                            <th class="formTitle">流程名称</th>
                            <td class="formValue">
                                <input id="SchemeName" name="SchemeName" type="text" class="form-control required" autocomplete="off" />
                            </td>
                        </tr>
                        <tr>
                            <th class="formTitle">流程分类</th>
                            <td class="formValue">
                                <select id="SchemeType" name="SchemeType" class="form-control required">
                                    <option value="">==请选择==</option>
                                    <option value="合同管理">合同管理</option>
                                    <option value="考勤管理">考勤管理</option>
                                    <option value="人事管理">人事管理</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th class="formTitle">流程表单</th>
                            <td class="formValue">
                                <select id="FrmId" name="FrmId" class="form-control required"></select>
                            </td>
                        </tr>
                        <tr>
                            <th class="formTitle">禁用</th>
                            <td class="formValue">
                                <input id="Status" name="Status" type="checkbox" class="" autocomplete="off" />
                            </td>
                        </tr>
                        <tr>
                            <th class="formTitle">备注</th>
                            <td class="formValue">
                                <textarea id="Description" name="Description" class="form-control" rows="3"></textarea>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="step-pane" id="step-2" style="margin: 10px; margin-bottom: 0px;">
                <div id="flowPanel" style="width:650px;height:350px;">

                </div>
            </div>
        </div>
        <div class="form-button" id="wizard-actions">
            <a id="btn_last" disabled class="btn btn-default btn-prev">上一步</a>
            <a id="btn_next" class="btn btn-default btn-next">下一步</a>
            <a id="btn_finish" class="btn btn-default" style="display: none;">完成</a>
        </div>
    </div>
</form>

@section scripts{

    <script>
        (function ($, clients) {
            "use strict";

            var baseUrl = "/flow/FlowSchemes/";
            var keyValue = $.request("keyValue");
            var flowDesignPanel = [];
            var FlowDesignObject = [];

            function init() {
                $("#SchemeCode").val(new Date().getTime());
                $("#FrmId").bindSelect({
                    url: "/flow/DivModel/GetSelectForm",
                });
                $('#wizard').wizard().on('change', function (e, data) {
                    var $finish = $("#btn_finish");
                    var $next = $("#btn_next");
                    if (data.direction == "next") {
                        switch (data.step) {
                            case 1:
                                if (!$('#form1').formValid()) {
                                    return false;
                                }
                                $finish.show();
                                $next.hide();
                                break;
                            default:
                                break;
                        }
                    } else {
                        $finish.hide();
                        $next.show();
                    }
                });
                clients.flowDesignPanel = $('#flowPanel').flowdesign({
                    height: 350,
                    widht: 600,
                    OpenNode: function (object) {
                        clients.FlowDesignObject = object; //为NodeInfo窗口提供调用
                        if (object.type == 'start round mix' || object.type == 'end round') {
                            $.modalAlert("开始节点与结束节点不能设置", "warning");
                            return false;
                        }
                        $.modalOpen({
                            id: object.id,
                            title: '节点设置【' + object.name + '】',
                            url: baseUrl + "NodeInfo",
                            width: "550px",
                            height: "450px",
                            callBack: function (iframeId) {
                                var nodedata = clients.getVal();// top.frames[iframeId].getVal();
                                console.log(nodedata);
                                clients.flowDesignPanel.SetNodeEx(object.id, nodedata);
                            }
                        });
                    },
                    OpenLine: function (id, object) {
                        clients.FlowDesignObject = object;
                        $.modalAlert("分支条件暂时只对企业版开放", "warning");
                        return;
                    }
                });
            }
        
            function submitForm() {
                var content = clients.flowDesignPanel.exportDataEx();
                if (content == -1) {
                    return false; //阻止表单跳转。
                }
                $("#SchemeContent").val(JSON.stringify(content));
                $.submitForm({
                    url: baseUrl + "SubmitForm?keyValue=" + keyValue,
                    param: $("#form1").formSerialize(),
                    success: function () {
                        $.currentWindow().$("#gridList").resetSelection();
                        $.currentWindow().$("#gridList").trigger("reloadGrid");
                    }
                })
            }
            $(function () {
                init();
                if (!!keyValue) {
                    $.ajax({
                        url: baseUrl + "GetFormJson",
                        data: { keyValue: keyValue },
                        dataType: "json",
                        async: false,
                        type: "POST",
                        success: function (data) {
                            $("#form1").formSerialize(data);
                            clients.flowDesignPanel.loadData(JSON.parse(data.SchemeContent));
                        }
                    });
                }
                $('#btn_finish').on('click', submitForm);
            });

        })(jQuery, top.clients);
    </script>
}